<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="smohan">
	<meta name="homepage" content="https://smohan.im">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>MoCss - 水墨寒的博客</title>
	<link rel="stylesheet" href="../css/mo.css">
	<link rel="stylesheet" href="demo.css">
	<style type="text/css">
		.demo-block-half {
			width: 45%;
			background-color: #f0f0f0;
			height: 2rem;
			padding: .5rem;
			line-height: 1rem;
		}
		.demo-block-three {
			width: 33.33%;
			height: 2rem;
			padding: .5rem;
			line-height: 1rem;
			text-align: center;
		}
	</style>
</head>
<body>
	<article class="demo">
		<a class="demo-back mo-button--fluid mo-button--primary" href="index.html">目录</a>
		<header class="demo-header">
			<h1>Mo-Utils</h1>
			<p>
				<a href="http://www.kancloud.cn/smohan/mo-css/281475" target="_blank">utils文档</a>
			</p>
		</header>
		<main class="demo-body">
			<section class="demo-section">
				<br/>
				<h4>float</h4>
				<div class="mo-clearfix">
					<div class="demo-block-half mo-left">mo-left</div>
					<div class="demo-block-half mo-right">mo-right</div>
				</div>
				<br/>
				<br/>
				<h4>text-align</h4>
				<p class="mo-text-left">
					mo-text-left
				</p>
				<p class="mo-text-center">
					mo-text-center
				</p>
				<p class="mo-text-right">
					mo-text-right
				</p>
				<br/>
				<br/>
				<h4>text-transform</h4>
				<p class="mo-text-lowercase">
					mo-text-lowercase
				</p>
				<p class="mo-text-uppercase">
					mo-text-uppercase
				</p>
				<p class="mo-text-capitalize">
					mo-text-capitalize
				</p>
				<h4>text-overflow</h4>
				<p class="mo-text-overflow">这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</p>
				<h4>display</h4>
				<ul>
					<li>
						<code>.mo-invisible </code> visibility: hidden
					</li>
					<li>
						<code>.mo-visible </code> visibility: visible
					</li>
					<li>
						<code>.mo-hide </code> display: none
					</li>
					<li>
						<code>.mo-show </code>  display: block
					</li>
					<li>
						<code>.mo-inline </code> display: inline
					</li>
					<li>
						<code>.mo-inline-block </code> display: inline-block
					</li>
				</ul>
				<h4>background-color</h4>
				<div class="mo-clearfix">
					<div class="demo-block-three mo-left mo-bg-primary">mo-bg-primary</div>
					<div class="demo-block-three mo-left mo-bg-positive">mo-bg-positive</div>
					<div class="demo-block-three mo-left mo-bg-negative">mo-bg-negative</div>
				</div>
				<br/>
				<br/>
				<h4>color</h4>
				<div class="mo-clearfix">
					<div class="demo-block-three mo-left mo-text-primary">mo-text-primary</div>
					<div class="demo-block-three mo-left mo-text-positive">mo-text-positive</div>
					<div class="demo-block-three mo-left mo-text-negative">mo-text-negative</div>
					<div class="demo-block-three mo-left mo-text-title">mo-text-title</div>
					<div class="demo-block-three mo-left mo-text-default">mo-text-default</div>
					<div class="demo-block-three mo-left mo-text-description">mo-text-description</div>
					<div class="demo-block-three mo-left mo-text-hint">mo-text-hint</div>
					<div class="demo-block-three mo-left mo-text-important">mo-text-important</div>
				</div>
			</section>
		</main>
	</article>

</body>
</html>